// 这是 main.js 是我们项目的JS入口文件

// 1. 导入 Jquery
// import *** from *** 是ES6中导入模块的方式
// 由于 ES6 的代码，太高级了，游览器解析不了，所以，这一行执行会报错
import $ from 'jquery'
// const $ = require('jquery')

// 使用 import 语法，导入 css 样式表
import './css/index.css'
// 注意: webpack，默认只能打包处理 JS 类型的文件，无法处理 其它的非 JS 类型的文件
// 如果要处理 非js类型的文件，我们需要手动安装一些 合适 第三方 loader 加载器;
// 1. 如果想要打包处理 css 文件，需要安装 cnpm i style-loader css-loader -D
// 2. 打开 webpack.config.js 这个配置文件，在里面，新增一个 配置节点，叫做 module, 它是一个对象;在 这个 module 对象身上，有个 rules 属性，这个 rules 属性时个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则；

import './css/index.less'
// cnpm i less-loader -D ;依赖cnpm i less -D

import './css/index.scss'
// cnpm i sass-loader -D;依赖cnpm i node-sass sass fibers  -D


$(function () {
    $('li:odd').css('backgroundColor','yue')
    $('li:even').css('backgroundColor',function () {
        return '#' + 'D97634';
    })
})

// webpack的功能
// 1.处理 JS文件的相互依赖关系
// 2. webpack 能够处理JS的兼容问题，把高级的、游览器不识别的语法，转为低级的语法

//命令:
//webpack src/main.js -o dist/bundle.js 


// 使用 webpack-dev-server 这个工具，来实现自动打包编译的功能
// 1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
// 2. 安装完毕后，这个 工具的用法，和 webpack 命令的用法，完全一样
//node  nodemon
//webpack webpack-dev-server
// 3. 由于，我们是在项目中，本地安装的 webpack-dev-server,所以，无法把它当做 脚本命令在powershell 终端中直接运行；(只有那些 安装到 全局 -g 的工具，才能在 终端中正常执行)
// 4. 注意：webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack
// npm run dev
// package.js script 添加 "dev": "webpack-dev-server"
// 5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到 实际的 物理磁盘上；而是直接托管到了 电脑的内存中，所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js
// 6. 我们可以认为，webpack-dev-server 把打包好的文件 ，以一种虚拟的形式，托管到了 咱们项目的 根目录中，虽热我们看不到它，但是，可以认为，和 dist src node_modules 平级，有一个看不到文件 叫做 bundle.js